<template>
	<div class="addAreaProject">
		<el-form :model="form" :rules="rules" label-width="150px" ref="form">
			<TitleCard class="project flex-column" title="新增项目">
				<el-row :gutter="50">
					<el-col :span="12">
						<el-form-item label="项目名称" prop="projectName">
							<el-input placeholder="请输入内容" v-model.trim="form.projectName"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="项目ID" prop="id">
							<el-input placeholder="项目ID" v-model.trim="form.id"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="50">
					<el-col :span="12">
						<el-form-item label="项目分类" prop="projectCategory">
							<el-input placeholder="请输入内容" v-model.trim="form.projectCategory"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="项目类型" prop="projectType">
							<el-select placeholder="A、B、C类项目" v-model="form.projectType">
								<el-option :key="item.value" :label="item.name" :value="item.name" v-for="item in tableData"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="50">
					<el-col :span="12">
						<el-form-item label="项目地区" prop="projectArea">
							<el-select placeholder="请选择" v-model="form.projectArea">
								<el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in tableData"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="模型专业" prop="projectModelProfessional">
							<el-select placeholder="请选择" v-model="form.projectModelProfessional">
								<el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in tableData"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="50">
					<el-col :span="12">
						<el-form-item label="坐标经度（百度）" prop="projectLat">
							<el-input placeholder="请输入内容" v-model.trim="form.projectLat"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="坐标纬度（百度）" prop="projectLng">
							<el-input placeholder="请输入内容" v-model.trim="form.projectLng"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="50">
					<el-col :span="24">
						<el-form-item label="是否国企协同" prop="isCooperation">
							<el-select placeholder="请选择" v-model="form.isCooperation">
								<el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in tableData"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="50">
					<el-col :span="24">
						<el-form-item label="项目概况" prop="projectOverview">
							<el-input :rows="4" placeholder="100字以内" type="textarea" v-model.trim="form.projectOverview"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="50">
					<el-col :span="12">
						<el-form-item label="项目奖项名称" prop="projectAwardName">
							<el-input placeholder="请输入奖项名称" v-model.trim="form.projectAwardName"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="50">
					<el-col :span="12">
						<el-form-item label="项目经理" prop="projectDirector">
							<el-input placeholder="请输入内容" v-model.trim="form.projectDirector"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="联系电话" prop="projectDirectorTelephone">
							<el-input placeholder="请输入内容" v-model.trim="form.projectDirectorTelephone"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</TitleCard>
		</el-form>

		<div class="btn">
			<el-button @click="back()" size="medium">取消</el-button>
			<el-button @click="handleSubmit" size="medium" type="primary">新增</el-button>
		</div>
	</div>
</template>
<script>
// import axios from 'axios'
import Api from './api'
import toolApi from '@/api/tool'

export default {
	props: ['id'],
	data() {
		return {
			form: {
				projectName: '11111',
				id: 111,
				projectCategory: '11111',
				projectCode: '11111',
				projectOverview: '11111',
				projectType: '11111',
				projectArea: '11111',
				projectModelProfessional: '11111',
				projectLat: '1',
				projectLng: '3',
				isCooperation: 0,
				projectAwardName: '11111',
				projectDirector: '11111',
				projectDirectorTelephone: '11111'
			},
			// 测试下拉
			typeOptions: [],
			tableData: '',
			tableData1: '',
			tableData2: '',
			queryParams: {
				dictCode: 'test',
				queryMode: '0'
			},
			fileVOS: [],
			rules: {
				projectName: [{ required: true, message: '请输入内容', trigger: 'blur' }],
				id: [{ required: true, message: '请输入内容', trigger: 'blur' }],
				projectCategory: [{ required: true, message: '请输入内容', trigger: 'change' }],
				projectType: [{ required: true, message: '请输入内容', trigger: 'change' }],
				projectArea: [{ required: true, message: '请输入内容', trigger: 'change' }],
				projectModelProfessional: [{ required: true, message: '请输入内容', trigger: 'change' }],
				projectLat: [{ required: true, message: '请输入内容', trigger: 'change' }],
				projectLng: [{ required: true, message: '请输入内容', trigger: 'change' }],
				isCooperation: [{ required: true, message: '请输入内容', trigger: 'change' }],
				projectOverview: [
					{ required: true, message: '请输入项目概况', trigger: 'blur' },
					{ max: 100, message: '最多100个字符', trigger: 'blur' }
				],
				projectAwardName: [{ required: false, message: '请输入内容', trigger: 'blur' }],
				projectDirector: [{ required: true, message: '请输入内容', trigger: 'blur' }],
				projectDirectorTelephone: [{ required: true, message: '请输入内容', trigger: 'blur' }]
			}
		}
	},
	computed: {
	},
	created() {
		this.oneDrop()
		// this.oneDrop2()
	},
	methods: {
		handleQuery(xxx) {
			toolApi.getDictItems({ dictCode: xxx, queryMode: '0' })
			.then(data => {
				this.tableData = data.records
				console.log('bbbbbbb', this.tableData[0].name)
			})
			return this.tableData
		},
		// 获取下拉列表
		loadDictOptions(xxx) {
			this.queryParams.dictCode = xxx
			toolApi.getDictItems(this.queryParams).then(data => {
				this.tableData = data.records
			})
			// return this.tableData
		},
		// 某个下拉选项
		oneDrop() {
			this.loadDictOptions('test')
			this.tableData1 = this.tableData
		},
		oneDrop2() {
			this.loadDictOptions('test1')
			this.tableData2 = this.tableData
		},
		// 提交表单
		handleSubmit: function () {
			this.$refs.form.validate(valid => {
				if (valid) {
					Api.addOrUpdate(this.form).then(() => {
						this.$message.success(this.form.id ? '修改成功' : '新增成功')
						console.log(this.form)
					})
				}
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.addAreaProject {
	.project {
		margin-top: $margin;
		.exp {
			font-size: 12px;
			line-height: 1;
			margin-top: 2px;
		}
		::v-deep .card-content {
			padding: 20px 10%;
			.el-row + .el-row {
				margin-top: $margin;
			}
		}
		.compony-tabel {
			border-collapse: collapse;
			width: 100%;
			thead {
				color: $color-text-h1;
			}
			td,
			th {
				padding: 10px;
				border: 1px solid $color-border-theme;
				text-align: center;
				vertical-align: middle;
			}
			th {
				font-size: 14px;
			}
			td {
				font-size: 14px;
				i {
					color: $color-err;
					cursor: pointer;
				}
				.notes {
					font-size: 12px;
					margin-top: 5px;
					text-align: left;
					color: $color-text-secondary;
				}
			}
		}
	}
	.btn {
		text-align: center;
		padding: 20px 0;
		.el-button + .el-button {
			margin-left: 40px;
		}
	}
}
</style>
